<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Range 范围</title>
</head>
<body>

<section>
    <p contenteditable="true">abcd<b>xyz</b>123</p>
    <div><b>xyz<em>inner</em>outer</b><i>123</i></div>
</section>

<script>
// 元素节点计算偏移量是算子元素 (childNodes) 数量 其他节点计算偏移量是算内容长度

// 创建 range
var range = document.createRange();


// 1. 使用 setStart setEnd 创建一段区域
//var startNode = document.getElementsByTagName('p')[0];  // p 元素
//var startOffset = 0;  // 从头部开始
//range.setStart(startNode, startOffset);

//var endNode = document.getElementsByTagName('p')[0];
//var endOffset = 2;  // 偏移量为 2 即到 b
//range.setEnd(endNode, endOffset);

//console.log(range.toString());



// 2. 使用 selectNode 创建一段区域
range.selectNode(document.getElementsByTagName('p')[0].firstChild);

console.log(range);
console.log('result:', range.toString());  // result: ab123

// 折叠选取 折叠后的选取不包含任何数据
//var range2 = document.createRange();
//range2.selectNode(document.getElementsByTagName('p')[0]);
//document.getElementsByTagName('p')[0].focus();
//range2.collapse(true);

//console.log(range2)
//console.log('collapsed result:', range2.toString());  // collapsed result:

</script>
</body>
</html>
